<template>
  <div>
    <div >
      <Header title="点评作业" subtitle="第一期" />
    </div>

    <div style="margin-top: 0px">
      <div>
        <div>
          <el-button
            style="
              width: 5vw;
              height: 5vh;
              border: 1px solid #edeef5;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: rgb(245, 247, 250);
              margin-left: 3vw;
            "
            @click="openTongji()"
          >
            统计
          </el-button>
        </div>
      </div>
      <el-descriptions
        :column="3"
        border
        v-for="item in tableData"
        :key="item.id"
        style="margin-bottom: 10px"
      >
        <el-descriptions-item
          :rowspan="2"
          :width="140"
          label="照片"
          align="center"
        >
          <el-image
            style="width: 100px; height: 100px"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </el-descriptions-item>
        <el-descriptions-item
          label="姓名"
          label-align="center"
          align="center"
          :rowspan="1"
          :width="140"
        >
          <div
            style="
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ item.name }}
          </div>
        </el-descriptions-item>

        <el-descriptions-item
          label="详情"
          :rowspan="1"
          label-align="center"
          align="center"
        >
          <el-button @click="openDialog(item)">查看作业</el-button>
        </el-descriptions-item>

        <el-descriptions-item
          label="作业提交"
          label-align="center"
          align="left"
        >
          <div
            style="
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ item.address }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div style="margin-top: 50px">
      <el-dialog v-model="dialogTongji" title="" width="80vw">
        <div><h2 class="table-heard">一个月学员完成作业提交统计表</h2></div>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column
            label="日期"
            property="date"
            width="120"
            align="center"
          >
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            property="name"
            label="姓名"
            width="120"
            align="center"
          />
          <el-table-column label="布置次数" property="buzhi" align="center" />
          <el-table-column
            label="完成次数"
            property="wangcheng"
            align="center"
          />
          <el-table-column label="详情" property="know" align="center" />

          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button
                @click="handleEdit(scope.row)"
                type="primary"
                size="mini"
                >编辑</el-button
              >
              <el-button
                @click="handleDelete(scope.row.id)"
                type="primary"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>

    <!-- 对话框 -->
    <div>
      <el-dialog v-model="dialogFormVisible" title="作业详情" width="450">
        <el-form :model="rowData">
          <el-form-item label="学生姓名" :label-width="80">
            <el-input v-model="rowData.name" autocomplete="off" />
          </el-form-item>
        </el-form>
        <el-form :model="rowData">
          <el-form-item label="评论" :label-width="80">
            <el-input
              v-model="rowData.text"
              type="textarea"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
        <el-form>
          <el-form-item label="礼物花" :label-width="80">
            <img
              :src="
                rowData.flower === 0
                  ? imagePaths.redFlower
                  : imagePaths.withFlower
              "
              alt=""
              @click="toggleFlower(row)"
            />

            <!-- <img src="@\assets\imgs\红花.png" alt="" />
            <img src="@\assets\imgs\无花.png" alt="" /> -->
          </el-form-item>
        </el-form>
        <template #footer>
          <div
            class="dialog-footer"
            style="
              display: flex;
              justify-content: space-between;
              padding: 0vh 5vw;
            "
          >
            <el-button type="primary" @click="dialogFormVisible = false"
              >保存</el-button
            >
            <el-button type="primary" @click="dialogFormVisible.value = false">
              退出
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import hong from "@/assets/imgs/红花.png";
import bai from "@/assets/imgs/无花.png";
import Header from '@/components/titleHeader/TitleHeader.vue';

const router = useRouter();
const dialogFormVisible = ref(false);
const dialogTongji = ref(false);
const formLabeWidth = "140px";
const rowData = ref({});

const imagePaths = {
  redFlower: hong,
  withFlower: bai,
};

const openTongji = (row) => {
  // rowData.value = row
  // console.log(rowData);
  dialogTongji.value = true;
};

const openDialog = (row) => {
  rowData.value = row;
  console.log(rowData);
  dialogFormVisible.value = true;
};
const toggleFlower = (row) => {
  rowData.value.flower = rowData.value.flower === 0 ? 1 : 0; // 更新传入的行数据
  console.log("更新后的花朵状态:", rowData.value.flower);
  console.log(rowData.value);
};

const tableData = ref([
  {
    id: 1,
    date: "2016-05",
    name: "Aleyna Kutzner",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarl",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
    buzhi: "20",
    wangcheng: "10",
    text: "",
    flower: 1,
  },
  {
    id: 2,
    date: "2016-04",
    name: "Helen Jacobi",
    address: "暂未提交作业",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "以入训",
    type: "学生",
    buzhi: "20",
    wangcheng: "10",
    flower: 1,
  },
  {
    id: 3,
    date: "2016-03",
    name: "Brandon Deckert",
    address: "暂未提交作业",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
    buzhi: "20",
    wangcheng: "10",
  },
  {
    id: 4,
    date: "2016-02",
    name: "Margie Smith",
    address: "暂未提交作业",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
    buzhi: "20",
    wangcheng: "10",
  },
  {
    id: 5,
    date: "2016-01",
    name: "Margie Smith",
    address: "23618 Windsor Drive, West Ricardoview, Idaho",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
    buzhi: "20",
    wangcheng: "10",
  },
]);
</script>

<style  scoped>
.heard {
  /* position: fixed; /* 固定位置 */
  /*top: 60px; /* 距离顶部 10px */
  /*left: 50%; /* 居中 */
  /*transform: translateX(-50%); /* 垂直居中调整 */
  z-index: 1000;
  width: 100%;
  height: 6vh;
  text-align: center;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0vh 4vw;
}
.table-heard {
  text-align: center;
  border: 1px solid #edeef5;
  border-bottom: 0px;
  color: #606266;
}

/*.ellipsis {
  white-space: nowrap; /* 防止文本换行 
  overflow: hidden; /* 超出容器隐藏 
  text-overflow: ellipsis; /* 超出部分用省略号表示 
  max-width: 140px;  设置最大宽度，可以根据具体情况调整 
}*/
</style>